<template>
	<div class="pages">
		<!-- 数据预览 -->
		<div class="data-preview">
			<div class="title">总数据预览</div>
			<div class="container">
				<div class="item" v-for="(item, idx) in state.dataPreview" :key="idx">
					<div class="icon">
						<img :src="item.icon">
					</div>
					<div class="info">
						<div class="item-count" v-text="item.count"></div>
						<div class="item-title" v-text="item.title"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 上报信息 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.escalationbar.title"></div>
			</div>
			<div v-if="state.escalationbar.badge" class="badge" v-text="state.escalationbar.badge"></div>
		</div>
		<!-- 上报信息列表 -->
		<div class="escalation">
			<div class="item">
				<div class="icon">
					<img src="../../assets/imgs/totalPreview/sb-jr.png">
				</div>
				<div class="info">
					<div class="count" v-text="state.escalationbar.data.jrsb"></div>
					<div class="title">今日上报</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="item">
				<div class="icon">
					<img src="../../assets/imgs/totalPreview/sb-lj.png">
				</div>
				<div class="info">
					<div class="count" v-text="state.escalationbar.data.ljsb"></div>
					<div class="title">累计上报</div>
				</div>
			</div>
		</div>
		<!-- 企业及时回复率排行榜 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.rankbar.title"></div>
			</div>
			<div v-if="state.rankbar.badge" class="badge" v-text="state.rankbar.badge"></div>
		</div>
		<!-- 企业及时回复率排行榜列表 -->
		<div class="ranks">
			<div class="item" v-for="(item, idx) in state.rankbar.lists" :key="idx">
				<div class="container">
					<div class="no">
						<img v-if="idx < 3" :src="Noformat(idx)">
						<div v-else>{{ idx + 1 }}</div>
					</div>
					<div class="info">
						<div class="content text-overflow" v-text="item.qymc || '暂无企业名称'"></div>
						<div class="label text-overflow">
							<span class="accept" v-text="'接受指令：' + (item.jszl || 0)"></span>
							<span class="reply" v-text="'回复指令：' + (item.hfzl || 0)"></span>
						</div>
					</div>
				</div>
				<van-divider v-if="state.rankbar.lists.length - 1 != idx" />
			</div>
		</div>

		<!-- 系统用户 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.sysuserbar.title"></div>
			</div>
			<div v-if="state.sysuserbar.badge" class="badge" v-text="state.sysuserbar.badge"></div>
		</div>
		<div class="sys-user">
			<div class="item" v-for="(item, idx) in state.sysuserbar.lists" :key="idx">
				<div class="icon">
					<img :src="item.icon">
				</div>
				<div class="content">
					<div class="info">
						<div class="title" v-text="item.title"></div>
						<div class="count" v-text="item.value"></div>
					</div>
					<div class="progress">
						<van-progress
							v-if="item.value"
							:color="idx % 2 == 0 ? 'linear-gradient(to right, #1860f0 0%, #618dfa 60%)' : 'linear-gradient(to right, #07a43b 0%, #6ed2ac 74%)'"
							:percentage="(item.value / state.sysuserbar.total * 100).toFixed(2)" stroke-width="8"
							:show-pivot="false" />
					</div>
				</div>
			</div>
		</div>
		<!-- 指令统计 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.echartsbar.title"></div>
			</div>
			<div v-if="state.echartsbar.badge" class="badge" v-text="state.echartsbar.badge"></div>
		</div>
		<!-- 指令统计图标 -->
		<div class="echarts-container">
			<div class="info">
				<div class="top">
					<div class="icon">
						<img src="../../assets/imgs/totalPreview/sort.png">
					</div>
					<div class="text">
						<span class="title" v-text="'累计统计：'"></span>
						<span class="count" v-text="state.echartsbar.info.ljtj"></span>
					</div>
				</div>
				<div class="center">
					<div class="icon">
						<img src="../../assets/imgs/totalPreview/timeout.png">
					</div>
					<div class="text">
						<span class="title" v-text="'已超时：'"></span>
						<span class="count" v-text="state.echartsbar.info.ycs"></span>
					</div>
				</div>
				<div class="bottom">
					<div class="cs">
						<div class="num" v-text="state.echartsbar.info.cs"></div>
						<div class="title">抄送</div>
					</div>
					<div class="line"></div>
					<div class="sp">
						<div class="num" v-text="state.echartsbar.info.sp"></div>
						<div class="title">审批</div>
					</div>
					<div class="line"></div>
					<div class="tj">
						<div class="num" v-text="state.echartsbar.info.tj"></div>
						<div class="title">提交</div>
					</div>
				</div>
			</div>
			<Echarts :options="state.echartsbar.options" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import Echarts from '../../components/Echarts/index.vue'
import '@/styles/font/stylesheet.css'
// icon
// 任务
import iconRwzs from '@/assets/imgs/totalPreview/rw-zs.png'
import iconRwdb from '@/assets/imgs/totalPreview/rw-db.png'
import iconRwyb from '@/assets/imgs/totalPreview/rw-yb.png'
import iconRwdfk from '@/assets/imgs/totalPreview/rw-wfk.png'
// 排行榜
import iconNo1 from '@/assets/imgs/totalPreview/no1.png'
import iconNo2 from '@/assets/imgs/totalPreview/no2.png'
import iconNo3 from '@/assets/imgs/totalPreview/no3.png'
// 系统用户
import iconQypt from '@/assets/imgs/totalPreview/sys-qypt.png'
import iconQyptyh from '@/assets/imgs/totalPreview/sys-qyptyh.png'
import iconJgjg from '@/assets/imgs/totalPreview/sys-jgjg.png'
import iconJgjgyh from '@/assets/imgs/totalPreview/sys-jgjgyh.png'
import { getTaskCount, getReportCount, getReplyConut, getSysuserCount, getInstructionsConut } from '@/api/home'

const state = reactive({
	// 数据预览列表
	dataPreview: [{
		title: '任务总数',
		field: 'rwzs',
		count: 0,
		icon: iconRwzs
	}, {
		title: '待办任务',
		field: 'dbrw',
		count: 0,
		icon: iconRwdb
	}, {
		title: '已办任务',
		field: 'ybrw',
		count: 0,
		icon: iconRwyb
	}, {
		title: '待反馈任务',
		field: 'wfkrw',
		count: 0,
		icon: iconRwdfk
	}],
	// 上报信息
	escalationbar: {
		title: '上报信息',
		badge: 0,
		data: {
			jrsb: 0,
			ljsb: 0
		}
	},
	// 企业及时回复率排行榜
	rankbar: {
		title: '企业及时回复率排行榜',
		badge: 0,
		lists: [] as any
	},
	// 系统用户
	sysuserbar: {
		title: '系统用户',
		badge: 0,
		total: 0,
		lists: [{
			field: 'qypt',
			title: '企业平台',
			icon: iconQypt,
			value: 0
		}, {
			field: 'qyptyh',
			title: '企业平台用户',
			icon: iconQyptyh,
			value: 0
		}, {
			field: 'jgjg',
			title: '监管机构',
			icon: iconJgjg,
			value: 0
		}, {
			field: 'jgjgyh',
			title: '监管机构用户',
			icon: iconJgjgyh,
			value: 0
		}]
	},
	// 指令统计
	echartsbar: {
		title: '指令统计',
		badge: 0,
		addNum: 0,
		centerTitle: '今日新增',
		lists: [] as any,
		tabs: {
			active: 'year'
		},
		info: {
			ljtj: 0,
			ycs: 0,
			cs: 0,
			sp: 0,
			tj: 0,
		},
		options: {
			legend: {
				top: '0%',
				left: 'center',
				itemGap: 20,
				itemWidth: 9,
				itemHeight: 9,
				textStyle: {
					fontSize: 10,
					color: '#181818'
				},
			},
			//点击提示文字
			tooltip: {
        trigger: 'item',
			},
			series: [
				{
					type: 'pie',
					radius: ['48%', '86%'],
					center: ['22%', '56%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 10
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					label: {
						normal: {
							show: true,
							position: 'center',
							color: '#4c4a4a',
							formatter: '{addNum|' + 0 + '}' + '\n\r' + '{centerTitle|' + '今日新增' + '}',
							rich: {
								addNum: {
									fontSize: 47,
									fontFamily: "lcd",
									color: '#1F2E4C'
								},
								centerTitle: {
									fontFamily: "lcd",
									fontSize: 14,
									color: '#1F2E4C',
									lineHeight: 10,
								},
							}
						},
						emphasis: {//中间文字显示
							show: true,
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						},
						tooltip: {
							show: false
						}
					},
					data: [
						{ value: 0, name: '抄送我的' },
						{ value: 0, name: '我审批的' },
						{ value: 0, name: '我提交的' },
					]
				}
			]
		}
	},
})

// 时间日期格式化
const dateFormat = (dateStr: any) => {
	const date = new Date(dateStr);
	let month = (date.getMonth() + 1).toString().padStart(2, '0');
	let day = date.getDate().toString().padStart(2, '0');
	let hours = date.getHours();
	let minutes: any = date.getMinutes();
	let ampm = hours >= 12 ? 'PM' : 'AM';
	hours = hours % 12;
	hours = hours ? hours : 12;
	minutes = minutes.toString().padStart(2, '0');
	let strTime = hours + ':' + minutes + ' ' + ampm;
	let strMD = month + '-' + day;
	return {
		time: strTime,
		md: strMD
	};
}

// tabs 切换回调
const tabChange = (value: any) => {
	console.log('value', value)
}

// 获取列表
const getLists = (lists: any[], length: number) => {
	const temp = lists.slice(0, length);
	return temp;
}

const Noformat = (index: any) => {
	switch (index) {
		case 0:
			return iconNo1;
		case 1:
			return iconNo2;
		case 2:
			return iconNo3;
	}
}

// 初始化
const init = () => {
	initTaskCount()
	initReportCount()
	initReplyConut()
	initSysuserCount()
	initInstructionsConut()
}

// 初始化总数据预览
const initTaskCount = async () => {
	const res = await getTaskCount()
	let data = res.data
	for (let key in data) {
		let index = state.dataPreview.findIndex((item) => {
			return key == item.field
		})
		let temp = state.dataPreview[index]
		if (temp.field in data) temp.count = data[temp.field as keyof typeof data]
	}
}

// 初始化上报信息
const initReportCount = async () => {
	const res = await getReportCount()
	let data = res.data
	state.escalationbar.data['jrsb'] = data['jrsb']
	state.escalationbar.data['ljsb'] = data['ljsb']
}

// 初始化企业及时回复率排行榜
const initReplyConut = async () => {
	const res = await getReplyConut()
	let data = res.data
	state.rankbar.lists = getLists(data, 5)
}

// 初始化系统用户
const initSysuserCount = async () => {
	const res = await getSysuserCount()
	let data = res.data
	state.sysuserbar.total = data.zyhsl
	for (let key in data) {
		let index = state.sysuserbar.lists.findIndex((item) => {
			return key == item.field
		})
		let temp = state.sysuserbar.lists[index]
		if (temp && temp.field in data) temp.value = data[temp.field as keyof typeof data]
	}
}

// 初始化指令统计
const initInstructionsConut = async () => {
	const res = await getInstructionsConut()
	let data = res.data
	for(let key in data) {
		if (key in state.echartsbar.info) state.echartsbar.info[key as keyof typeof state.echartsbar.info] = data[key as keyof typeof data]
	}
	state.echartsbar.addNum = state.echartsbar.info['cs'] + state.echartsbar.info['sp'] + state.echartsbar.info['tj']
	let options = {
		label: {
			normal: {
				show: true,
				position: 'center',
				color: '#4c4a4a',
				formatter: '{addNum|' + state.echartsbar.addNum + '}' + '\n\r' + '{centerTitle|' + state.echartsbar.centerTitle + '}',
				rich: {
					addNum: {
						fontSize: 47,
						fontFamily: "lcd",
						color: '#1F2E4C'
					},
					centerTitle: {
						fontFamily: "lcd",
						fontSize: 14,
						color: '#1F2E4C',
						lineHeight: 10,
					},
				}
			},
			emphasis: {//中间文字显示
				show: true,
			}
		},
		data: [
			{ value: state.echartsbar.info['cs'], name: '抄送我的' },
			{ value: state.echartsbar.info['sp'], name: '我审批的' },
			{ value: state.echartsbar.info['tj'], name: '我提交的' },
		]
	}
	Object.assign(state.echartsbar.options.series[0], options)
}


onMounted(() => {
	init()
})

</script>
<style lang="scss" scoped>
.pages {
	box-sizing: border-box;
	padding: 12px;
	height: auto;

	// 数据预览
	.data-preview {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		padding: 12px;

		.title {
			font-size: 18px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #181818;
			margin-bottom: 12px;
		}

		.container {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(2, minmax(0, 1fr));
			grid-gap: 12px;

			.item {
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				background-image: url('../../assets/imgs/totalPreview/bg.png');
				display: flex;
				align-items: center;
				padding: 6px;

				.icon {
					flex: 1;
					display: flex;
					align-items: center;

					img {
						width: 100%;
					}
				}

				.info {
					width: 60%;
					margin-left: 12px;

					.item-count {
						font-size: 24px;
						color: #181818;
						font-family: "lcd";
						font-weight: bold;
						margin-bottom: 4px;
						letter-spacing: 2px;
					}

					.item-title {
						font-size: 10px;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: bold;
						text-align: left;
						color: #646464;
					}
				}
			}
		}
	}

	//标题栏样式
	.taskbar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			display: flex;
			align-items: center;
			margin: 16px 0;

			.line {
				width: 4px;
				height: 16px;
				margin-right: 8px;
				background-color: $primary-color;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}
	}

	// 上报信息
	.escalation {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			display: flex;
			align-items: center;
			padding: 16px 0;

			.icon {
				margin-right: 16px;

				img {
					width: 25px;
					height: 25px;
				}
			}

			.info {
				text-align: center;

				.count {
					font-family: "lcd";
					font-size: 24px;
					font-weight: bold;
					text-align: left;
					color: #181818;
					letter-spacing: 2px;
					margin-bottom: 2px;
				}

				.title {
					font-size: 10px;
					font-weight: bold;
					text-align: left;
					color: #646464;
				}
			}
		}

		.line {
			width: 0.5px;
			height: 34px;
			background: #ececec;
			margin: 0 45px;
		}
	}

	// 企业及时回复率排行榜
	.ranks {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		padding: 16px 12px;

		.item {
			.container {
				display: flex;
				align-items: center;

				.no {
					margin-right: 9px;

					img {
						width: 32px;
						height: 32px;
					}

					div {
						width: 25px;
						height: 25px;
						border-radius: 50%;
						background-color: #F1F4FF;
						text-align: center;
						line-height: 25px;
						color: $primary-color;
					}
				}

				.info {
					flex: 1;

					.content {
						font-size: 14px;
						font-weight: bold;
						text-align: left;
						color: #181818;
						margin-bottom: 6px;
					}

					.label {
						.accept {
							font-size: 10px;
							font-weight: bold;
							text-align: left;
							color: #646464;
							margin-right: 26px;
						}

						.reply {
							font-size: 10px;
							font-weight: bold;
							text-align: left;
							color: #646464;
						}
					}
				}
			}
		}
	}

	// 系统用户
	.sys-user {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		padding: 16px 12px;

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 16px;

			&:last-child {
				margin-bottom: 0;
			}

			.icon {
				margin-right: 12px;
				width: 25.5px;
				height: 25.5px;
				border-radius: 5px;
				background-color: #F1F4FF;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 14px;
					height: 14px;
				}
			}

			.content {
				flex: 1;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6px;

					.title {
						font-size: 14px;
						font-weight: bold;
						text-align: left;
						color: #181818;
					}

					.count {
						font-size: 14px;
						font-family: 'lcd';
						font-weight: bold;
						text-align: right;
						color: #181818;
						letter-spacing: 2px;
					}
				}

				.progress {}
			}
		}
	}

	// echarts-container
	.echarts-container {
		position: relative;
		height: 200px;
		box-sizing: border-box;
		padding: 16px 12px;
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		position: relative;

		.info {
			position: absolute;
			right: 12px;
			top: 26%;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;

			.top {
				margin-bottom: 4px;
			}

			.top,
			.center {
				background: #f6f8ff;
				border-radius: 7.5px;
				box-sizing: border-box;
				padding: 10px 16px;
				display: flex;
				width: 100%;

				.icon {
					margin-right: 12px;

					img {
						width: 12px;
						height: 12px;
					}
				}

				.text {
					.title {
						font-size: 14px;
						font-weight: bold;
						text-align: left;
						color: #181818;
					}

					.count {
						font-size: 17px;
						font-family: 'lcd';
						font-weight: bold;
						text-align: left;
						color: #181818;
						letter-spacing: 2px;
					}
				}
			}

			.bottom {
				margin-top: 14px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.cs,
				.sp,
				.tj {
					text-align: center;

					.num {
						font-size: 14px;
						font-family: 'lcd';
						font-weight: bold;
						color: #181818;
						margin-bottom: 6px;
						letter-spacing: 2px;
					}

					.title {
						font-size: 10px;
						font-weight: bold;
						color: #646464;
					}
				}

				.line {
					width: 0.5px;
					height: 19px;
					background: #ececec;
				}
			}
		}
	}
}
</style>